<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>用户客户端</title>
		<link rel="stylesheet" href="./css/index.css">
	</head>

	<body>
		<h6 class="isweb">查询是否支持websocket...</h6>
		<h6 class="bbb">查询ws...</h6>
		<h6 class="ccc">正在建立连接...</h6>
		<div class="chat-content">
			<div class="head"><span>商家客服</span><button id="close">关闭</button></div>
			<div class="body">
				<!-- <div class="item">
					<img src="./image/avatr.png" alt="">
					<div class="mess">
						<p class="time">2019</p>
						<p class="text">消息</p>
					</div>
				</div> -->
			</div>
			<div class="foot">
				<button type="button">图片</button>
				<input type="file" class="file jsfile">
				<input type="" class="inp" />
				<!-- <input type="text" value="发送图片"> -->
				<button type="button" id="btnSend">发送消息</button>
			</div>
		</div>
		<img src="" class="yimg" />
		<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
		<script>
			if ("WebSocket" in window) {
				$('.isweb').text('支持服务')
			} else {
				$('.isweb').text('不支持服务')
			}
			var base64 = '';
			// 创建websocket,并与服务器建立链接
			var ws = new WebSocket("ws://192.168.6.70:3000")
			if (ws) {
				$('.bbb').text('正常创建websokect')
			} else {
				$('.bbb').text('正常创建websokect')
			}
			var uid = 158
			var uimg = "./image/su.png"
			ws.onopen = function(e) {
				$('.ccc').text('已建立链接')
				// console.log('连接建立时触发', e);
			}
			ws.onmessage = function(e) {
				var time = formatDate()
				var getValue = JSON.parse(e.data)
				var isme = getValue.id == uid ? 'rightStyle' : ''
				if (getValue.base64 == '') {
					$('.body').append(`<div class="item ${isme}">
						<img class="avatr" src="${getValue.avatr}" alt="">
						<div class="mess">
							<p class="time">${time}</p>
							<p class="text">${getValue.value}</p>
						</div>
					</div>`)
				} else if (getValue.base64 != '') {
					$('.body').append(`<div class="item ${isme}">
						<img class="avatr" src="${getValue.avatr}" alt="">
						<div class="mess">
							<p class="time">${time}</p>
							<p class="text">${getValue.value}</p>
							<img class="valueImg"src="${getValue.base64}"/>
						</div>
					</div>`)
				}
				var h = $('.body').prop("scrollHeight"); //等同 $('.out-box')[0].scrollHeight
				$('.body').scrollTop(h);
			}


			$('body').on('click', '#btnSend', function() {

				var value = $('.inp').val();
				if (!value && !base64) return
				newValue = JSON.stringify({
					avatr: uimg,
					value: value,
					id: uid,
					base64: base64
				})
				ws.send(newValue)
				$('.inp,.jsfile').val('');

				$('.yimg').attr('src', '');
				base64 = '';
			})
			$(document).keyup(function(event){
			  if(event.keyCode ==13){
			    $("#btnSend").trigger("click");
			  }
			});
			$('body').on('change', '.jsfile', function() {
				var _obj = $(this);
				files(_obj);
			})
			$('body').on('click', '#close', function() {
				ws.close()
				$('.chat-content').hide()
				alert('连接已关闭')
			})




			function formatDate() {
				var now = new Date();
				var year = now.getFullYear(),
					month = now.getMonth() + 1,
					date = now.getDate(),
					hour = now.getHours(),
					minute = now.getMinutes(),
					second = now.getSeconds();
				minute = checkTime(minute);
				month = checkTime(month);
				date = checkTime(date);
				hour = checkTime(hour);
				second = checkTime(second);
				return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
			}

			function checkTime(i) {
				if (i < 10) {
					i = "0" + i
				}
				return i
			}

			function files(_obj) {
				var file = $(_obj).get(0).files[0];
				var reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function(e) {
					console.log(e.target.result);
					$(".yimg").attr("src", e.target.result);
					base64 = e.target.result;
				}
			}
		</script>
	</body>

</html>
